<template>
  <a-popover
    v-model="visible"
    trigger="click"
    placement="bottomRight"
    overlayClassName="header-notice-wrapper"
    :getPopupContainer="() => $refs.noticeRef.parentElement"
    :autoAdjustOverflow="true"
    :arrowPointAtCenter="true"
    :overlayStyle="{ width: '300px', top: '50px' }"
  >
    <template slot="content">
      <a-spin :spinning="loading" class="topNotice">
        <a-tabs>
          <a-tab-pane
            v-for="(item) in sysMessageList"
            :key="item.title">
            <a-list>
              <a-list-item
                v-for="(itemSub) in item.dataList"
                :key="itemSub.id"
                @click="showInfo(itemSub)"
                style="cursor: pointer">
                <!--{{itemSub}}-->
                <a-list-item-meta
                  :title="itemSub.title">
                  <template slot="description">
                    <span v-wx-time="itemSub.createTime"></span>
                  </template>
                  <a-avatar
                    style="background-color: white"
                    slot="avatar"
                    src="~@assets/image/message.png"/>
                </a-list-item-meta>
              </a-list-item>
            </a-list>
            <span slot="tab">
              <template>
                <a-badge :count="item.counts">
                  <div style="width: 65px"><span>{{ item.title }}</span></div>
                </a-badge>
              </template>
            </span>
            <div style="margin-top: 5px;text-align: center">
              <a-button
                type="dashed"
                block
                @click="goMore(item.type)">查看更多</a-button>
            </div>
          </a-tab-pane>
        </a-tabs>
      </a-spin>
    </template>
    <span
      @click="fetchNotice"
      class="header-notice"
      ref="noticeRef">
      <a-badge :count="sysMessageCount">
        <a-icon style="font-size: 16px; cursor: pointer" type="bell"/>
      </a-badge>
    </span>
  </a-popover>
</template>

<script>
  import { mapGetters } from 'vuex'
  import axios from 'axios'
  export default {
    name: 'HeaderNotice',
    components: {},
    data () {
      return {
        loading: false,
        visible: false,
        url: {
          getInfo: '/system/sysNotice/myNoticeView'
        }
      }
    },
    computed: {
      ...mapGetters(['sysMessageCount', 'sysMessageList'])
    },
    methods: {
      fetchNotice () {
        // if (!this.visible) {
        //   this.loading = true
        // } else {
        //   this.loading = false
        // }
        this.visible = !this.visible
      },
      goMore (type) {
        this.$router.push({ name: 'myNotice', query: { type: type } })
        this.visible = false
      },
      showInfo (itemSub) {
        if (itemSub.msgCategory == 1) {
          this.$emit('showInfoRouter', itemSub)
        } else {
          this.$emit('showInfo', itemSub.id)
        }
      }
    }
  }
</script>

<style lang="less" scoped>
  .header-notice {
    display: inline-block;
    transition: all 0.3s;

    span {
      vertical-align: initial;
    }
  }
</style>
<style lang="css">
  .header-notice-wrapper {
    top: 50px !important;
  }
</style>
